{extend name="public/base" /}
{block name="css"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.css" /}
<style>

  .container-fluid {
    padding: 0;
  }


  .mx-auto {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
  }

  .left-container {
    display: none;
    width: 160px;
    height: 448px;
    background: #F0A78C;
    border-radius: 8px;
    position: fixed;
    left: 120px;
    top: 180px;
    z-index: 100;
  }

  .left-nav {
    background: #ffffff;
    border-radius: 8px;
    text-align: center;
    margin: 0 5px;
    padding: 10px 10px 10px;
  }

  .left-nav > div {
    margin-top: 5px;
    cursor: pointer;
    color: #333333;
    font-size: 14px;
    padding: 3px;
  }

  .left-nav .selected {
    background: #ED7D5C;
    color: #ffffff;
    border-radius: 13px;
  }

  .appointment {
    background: #C2251D;
    border-radius: 8px;
    width: 120px;
    height: 35px;
    line-height: 32px;
    color: #ffffff;
    border: 0;
    margin-top: 10px;
  }

  .swiper-container {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide > a > img {
    width: 100%;
  }

  .swiper-slide > img {
    width: 100%;
  }

  .swiper-pagination .swiper-pagination-bullet {
    background: rgba(10, 10, 10, .4);
    opacity: 1.0;
  }

  .swiper-pagination .swiper-pagination-bullet-active {
    background: #FFFFFF;
  }

  .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 3px;
  }

</style>
{/block}
{block name="main"}
<section class="container-fluid main-container">
  <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/pc/banner-rz.png">

  <div id="yh" class="mx-auto" style="padding: 0 0 40px">
    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/pc/pc_1.jpg">
    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/pc/pc_2.jpg">
    <img onclick="window.open('https://tb.53kf.com/code/client/5a94a95735e35494ea43bac6762f40560/1')" style="cursor: pointer;margin-top: -90px" alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/pc/button1.png">
  </div>

  <div class="left-container">
    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/pc/tab_top.png">
    <div class="left-nav">
      <div id="nav-yh">1元秒杀</div>
      <div id="nav-zmyj">6重软装大礼</div>
      <div id="nav-ujgc">8重整装大礼</div>
      <div id="nav-dgzj">10重旧房焕新大礼</div>
    </div>
    <div style="color: #FFFFFF; font-size: 14px;text-align: center;margin-top: 10px">
      扫码咨询更多
      <br>
      爱家装修季详情
    </div>
    <img alt="" style="margin-top: 10px" class="mx-auto img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/pc/code_zx.png">
    <button onclick="window.page_postion = '爱家装修季左侧悬浮报名按钮';showAppointmentLayer()" class="mx-auto appointment u-order">抢占活动名额</button>
  </div>

  <div id="zmyj" class="mx-auto" style="position: relative;margin-top: -25px">
    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/pc/rz/rz1.jpg">
    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/pc/rz/rz2.jpg">
    <img onclick="window.open('https://tb.53kf.com/code/client/5a94a95735e35494ea43bac6762f40560/1')" style="cursor: pointer;width: 18%;position: absolute;margin: 0 auto;bottom: 50px" alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/pc/button3.png">
  </div>

  <div id="ujgc" class="mx-auto" style="position: relative">
    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/pc/zz/zz1.jpg">
    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/pc/zz/zz2.jpg">
    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/pc/zz/zz3.jpg">
    <img onclick="window.open('https://tb.53kf.com/code/client/5a94a95735e35494ea43bac6762f40560/1')" style="cursor: pointer;width: 18%;position: absolute;margin: 0 auto;bottom: 20px" alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/pc/button2.png">
  </div>

  <div id="dgzj" class="mx-auto" style="position: relative;">
    <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/pc/gz/gz1.jpg">
    <img alt="" class="img-fluid" style="margin-bottom: 30px" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/pc/gz/gz2.jpg">
    <img onclick="window.open('https://tb.53kf.com/code/client/5a94a95735e35494ea43bac6762f40560/1')" style="cursor: pointer;width: 18%;position: absolute;margin: 0 auto;bottom: 60px" alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202008/pc/button4.png">
  </div>

  <div style="margin: 30px 0 60px; text-align: center; color: #333;letter-spacing: 2px">*以上礼品以实物为准，活动详情咨询工作人员<br>以上活动解释权归致美优家所有</div>
</section>
{/block}
{block name="js"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.js" /}
<script>
  $('#nav-yh').on('click', function () {
    $('html,body').animate({scrollTop:$('#yh').offset().top - 50}, 300);
    $('.left-nav').find('div').removeClass('selected');
    $(this).addClass('selected');
  });
  $('#nav-ujgc').on('click', function () {
      $('html,body').animate({scrollTop:$('#ujgc').offset().top - 50}, 300);
      $('.left-nav').find('div').removeClass('selected');
      $(this).addClass('selected');
  });
  $('#nav-zmyj').on('click', function () {
      $('html,body').animate({scrollTop:$('#zmyj').offset().top - 50}, 300);
      $('.left-nav').find('div').removeClass('selected');
      $(this).addClass('selected');
  });
  $('#nav-dgzj').on('click', function () {
      $('html,body').animate({scrollTop:$('#dgzj').offset().top - 50}, 300);
      $('.left-nav').find('div').removeClass('selected');
      $(this).addClass('selected');
  });

  const swiper = new Swiper('.swiper-container', {
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    } ,
    autoplay: {
      delay: 4000,
      stopOnLastSlide: false,
      disableOnInteraction: true,
    },
    paginationElement : 'li',
    paginationClickable: true,
    loop: true,
    autoplayDisableOnInteraction: false
  });

  $('.left-container').hide();

  $(function(){
      // 监听滚动事件
      $(window).scroll(function(){

        const yh = document.getElementById("yh").offsetTop+($(window).height() - 100);
        console.log('yh', yh);
        console.log('11', $(window).scrollTop());
        console.log('22', $(window).scrollTop()+$(window).height());
        if (yh >= $(window).scrollTop() && yh < ($(window).scrollTop()+$(window).height())) {
          $('#nav-yh').addClass('selected');
          $('.left-container').show();
        }else{
          $('#nav-yh').removeClass('selected');
          if($(window).scrollTop() < yh) {
            $('.left-container').hide();
          }
        }

          const zmyj = document.getElementById("zmyj").offsetTop+($(window).height() - 100);
          console.log('zmyj', zmyj);
          console.log('11', $(window).scrollTop());
          console.log('22', $(window).scrollTop()+$(window).height());
          if (zmyj >= $(window).scrollTop() && zmyj < ($(window).scrollTop()+$(window).height())) {
              $('#nav-zmyj').addClass('selected');
          }else{
              $('#nav-zmyj').removeClass('selected');
          }

          const ujgc = document.getElementById("ujgc").offsetTop+($(window).height() - 100);
          if (ujgc >= $(window).scrollTop() && ujgc < ($(window).scrollTop()+$(window).height())) {
              // $('.left-container').show();
              $('#nav-ujgc').addClass('selected');
          }else{
              $('#nav-ujgc').removeClass('selected');
              // if($(window).scrollTop() < ujgc) {
              //     $('.left-container').hide();
              // }
          }

          const dgzj = document.getElementById("dgzj").offsetTop+($(window).height() - 100);
          if (dgzj >= $(window).scrollTop() && dgzj < ($(window).scrollTop()+$(window).height())) {
              $('#nav-dgzj').addClass('selected');
          }else{
              $('#nav-dgzj').removeClass('selected');
          }
      });
  })
</script>
{/block}